<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  limitSettings: {
    type: Object,
    required: true
  }
})

// 精确查询条件
const preciseQuery = reactive({
  postId: null
})

// 预览数据
const previewPosts = ref([])
const showPreview = ref(false)

// 获取帖子
const getPostById = () => {
  if (!preciseQuery.postId) {
    ElMessage.warning('请输入帖子ID')
    return
  }
  // TODO: 调用API获取帖子
  showPreview.value = true
}

// 执行限流
const executeLimit = (post) => {
  // TODO: 调用API执行限流
  ElMessage.success('限流成功')
}
</script>

<template>
  <div class="precise-limit">
    <div class="filter-section">
      <el-form inline>
        <el-form-item label="帖子ID">
          <el-input v-model="preciseQuery.postId" placeholder="请输入帖子ID" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getPostById">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 限流规则设置 -->
    <div class="rules-section">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>限流规则设置</span>
          </div>
        </template>
        <el-form label-width="120px">
          <!-- ... 保持现有的限流规则设置表单 ... -->
        </el-form>
      </el-card>
    </div>

    <!-- 预览区域 -->
    <div v-if="showPreview" class="preview-section">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>预览结果</span>
          </div>
        </template>
        <el-table :data="previewPosts" border style="width: 100%">
          <el-table-column prop="title" label="帖子标题" />
          <el-table-column prop="topic" label="话题" />
          <el-table-column prop="author" label="发布者" />
          <el-table-column prop="createTime" label="发布时间" />
          <el-table-column prop="hot" label="当前热度" />
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button @click="executeLimit(scope.row)">执行限流</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>